<template>
  <div id="search">
    <div class="search-box d-flex ai-center jc-between px-2 fs-xxl py-2" :class="searchClass">
      <div style="word-break: keep-all;" class="name"><i class="web-font">校园快药</i></div>
      <div class="search-input d-flex jc-between ai-center pl-3">
        <i class="mintui mintui-search fs-xxl"></i>
        <input  class="py-2" type="text" v-model="searchValue" @click="goSearch()" readonly />
      </div>
      <!-- <a href="/baiduMap" v-if="isLogin"> -->
      <router-link to="/baiduMap" tag="div" v-if="isLogin">
      <div @click="go">
        
        <div v-if="isLogin && !city" class="iconfont icon-location text-white fs-xxxl pr-2"></div>
        <div style="word-break: keep-all;" v-if="isLogin && city" class="text-white fs-md">{{$store.getters.getCurrentCit}}</div>
      </div>
    </router-link>
      <!-- </a> -->
      
    </div>
  </div>
</template>

<script>
export default {
  props: ["nofixed"],
  data() {
    return {
      searchValue: "新冠核酸检测",
      searchClass: "top",
      isLogin: false,
      city: ''
    };
  },
  methods: {
    go(){
      if (!this.isLogin) {
        this.$router.push('/login')
      }
    },
    goSearch() {
      this.$router.push("/search");
    },
    handleScroll() {
      var scrollTop = document.getElementById("mainContent").scrollTop;
      let osTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 100 || osTop > 100) {
        this.searchClass = "dow";
      } else {
        this.searchClass = "top";
      }
    }
  },
  mounted() {
    this.city  = this.$store.getters.getCurrentCit;
    if (this.nofixed) {
      this.searchClass = "dow";
    } else {
      document.getElementById("mainContent").onscroll = () => {
        this.handleScroll();
      };
      window.onscroll = () => {
        this.handleScroll();
      };
    }
    let jwt = this.$store.getters.getToken;
    this.isLogin = jwt != "" && jwt != undefined;
  }
};
</script>

<style lang="scss" scoped>
.top {
  background-color: rgba(231, 78, 78, 1);
}
.dow {
  background-color: rgba(231, 78, 78, 1);
}
.search-box {
  overflow: hidden;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 100;
}
.name {
  font-style: 微软雅黑;
  font-weight: bold;
  font-size: 21px;
}
.search-input {
  background-color: #fff;
  border: none;
  border-radius: 80px;
  width: 70%;
  height: 100%;
  overflow: hidden;
  input[type="text"] {
    font-size: 18px;
    border: none;
    width: 90%;
    height: 80%;
    color: #979595;
  }

}
@font-face {
    font-family: 'webfont';
    font-display: swap;
    src: url('../../assets/iconfont/webfont.eot'); /* IE9 */
    src: url('../../assets/iconfont/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../../assets/iconfont/webfont.woff2') format('woff2'),
    url('../../assets/iconfont/webfont.woff') format('woff'), /* chrome、firefox */
    url('../../assets/iconfont/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../../assets/iconfont/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
.web-font {
    font-family: "webfont" !important;
    font-size: 19px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
</style>



